<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" th:href="@{/static/css/home.css}"/>
    <!-- Bootstrap Css -->
    <link th:href="@{/static/css/bootstrap.min.css}" id="bootstrap-style" rel="stylesheet" type="text/css">
    <!-- Icons Css -->
    <link th:href="@{/static/css/icons.min.css}" rel="stylesheet" type="text/css">
    <!-- App Css-->
    <link th:href="@{/static/css/app.min.css}" id="app-style" rel="stylesheet" type="text/css">
</head>
<style>
    a {
        text-decoration: none;
        color: white;
    }

    .home_info_box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: 10px;
        margin-top: 10px;
        border-radius: 16px;
    }

    .intro-title {
        font-size: 16px;
        margin-left: 20px;
        margin-top: 20px;
        color:white;
        font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', DengXian, SimSun, 'Segoe UI', Tahoma, Helvetica, sans-serif;
        font-weight: bold
    }

</style>

<body>
<div class="home" id="app" v-loading="loading">

    <div class="main-content" v-loading="loading">
        <div class="page-content" style="margin-top: 1%">
            <div class="container-fluid">


                <div class="row">
                    <div class="col-xl-3 col-sm-6">
                        <div class="card mini-stat " style="background-color: #e9a06f  !important">
                            <div class="card-body mini-stat-img">
                                <div class="mini-stat-icon">
                                    <i class="mdi mdi-account float-end"></i>
                                </div>
                                <div class="text-white">
                                    <h6 class="text-uppercase mb-3 font-size-16 text-white">用户量</h6>
                                    <h2 class="mb-4 text-white">1087</h2>
                                    <span class="badge bg-info"> +15% </span> <span
                                        class="ms-2">比昨日</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-sm-6">
                        <div class="card mini-stat" style="background-color: #e9a06f  !important">
                            <div class="card-body mini-stat-img">
                                <div class="mini-stat-icon">
                                    <i class="mdi mdi-account-circle float-end"></i>
                                </div>
                                <div class="text-white">
                                    <h6 class="text-uppercase mb-3 font-size-16 text-white">访问量</h6>
                                    <h2 class="mb-4 text-white">3365</h2>
                                    <span class="badge bg-danger"> -29% </span> <span
                                        class="ms-2">比昨日</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-sm-6">
                        <div class="card mini-stat" style="background-color: #e9a06f  !important">
                            <div class="card-body mini-stat-img">
                                <div class="mini-stat-icon">
                                    <i class="mdi mdi-clipboard-text float-end"></i>
                                </div>
                                <div class="text-white">
                                    <h6 class="text-uppercase mb-3 font-size-16 text-white">厨师订单</h6>
                                    <h2 class="mb-4 text-white">35</h2>
                                    <span class="badge bg-warning"> 5% </span> <span
                                        class="ms-2">比昨日</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-sm-6">
                        <div class="card mini-stat" style="background-color: #e9a06f  !important">
                            <div class="card-body mini-stat-img">
                                <div class="mini-stat-icon">
                                    <i class="mdi mdi-square-inc-cash float-end"></i>
                                </div>
                                <div class="text-white">
                                    <h6 class="text-uppercase mb-3 font-size-16 text-white">收入</h6>
                                    <h2 class="mb-4 text-white">1890</h2>
                                    <span class="badge bg-info"> +89% </span> <span
                                        class="ms-2">比昨日</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->


            </div>
        </div>


    </div>
    <div class="home_info_box">
        <div style="margin-left: 5px;display: flex;flex-direction: column;background-color: #e9a06f; color: whitesmoke;border-radius: 8px;margin-right: 8px">
            <div class="intro-title">平台简介</div>

            <div style="margin-left: 10px;margin-right: 10px;margin-top: 15px">
                <p style="font-size: 16px;color: #ffffff;line-height: 25px;text-indent: 3em; "> &nbsp;&nbsp;
                    “食谱雅集”微信小程序不仅打破了传统的会员机制和第三方广告困扰，还推出了作为创新点的上门厨师服务。用户可以通过预约让厨师到家里现场烹饪，这样不仅可以保证整个烹饪制作过程的卫生安全，还可以确保食材的新鲜。</br>
                </p>

                <p style="font-size: 16px;color: #ffffff;line-height: 25px;text-indent: 3em; "> &nbsp;&nbsp;
                    “食谱雅集”微信小程序计划在未来推出更多功能模块，例如家政服务、二手用品交易服务、免中介租房服务等功能模块。这些功能模块都将以用户需求为出发点，目的都是为用户提供实际便捷，解决生活中遇到的各种问题，如二手平台交易用品图片与实物不符带来的争执，租房平台中介过多用户难以直接联系到房东无法找到优质房源以及被中介收取高价中介费等问题。“食谱雅集”微信小程序将致力于成为一个以食谱分享为主，同时提供多元化的生活服务平台。
                </p>
            </div>

        </div>
    </div>
    <el-divider/>
</div>
</body>

<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/api/login.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<!-- JAVASCRIPT -->
<script th:src="@{/static/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/static/js/metisMenu.min.js}"></script>
<script th:src="@{/static/js/simplebar.min.js}"></script>
<script th:src="@{/static/js/waves.min.js}"></script>
<script th:src="@{/static/js/jquery.sparkline.min.js}"></script>

<!--Morris Chart-->
<script th:src="@{/static/js/morris.min.js}"></script>
<script th:src="@{/static/js/raphael.min.js}"></script>

<script th:src="@{/static/js/dashboard.init.js}"></script>

<script th:src="@{/static/js/app.js}"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                checked: false,
                buttons: [],
            }
        },
        created() {
        },
        methods: {

            parseTreeJson(treeNodes) {
                for (let i = 0; i < treeNodes.length; i++) {
                    if (treeNodes[i].url) {
                        this.buttons.push(treeNodes[i].url);
                    }
                    let child = treeNodes[i].children;
                    if (child && child.length > 0) {
                        this.parseTreeJson(child);
                    }
                }
            }
        }
    })
</script>

</html>
